<template>
  <div class="group-item">
    <div class="group-item-chart" :id="'charts' + index"></div>
  </div>
</template>
<script>
window.wx = {};
export default {
  props: {
    index: {
      type: Number,
      default: 0,
    },
    option: {
      type: Object,
      default() {
        return {};
      },
    },
    chartData: {
      type: Array,
      default() {
        return [];
      },
    },
    indicator: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  methods: {
    // 获取需要生成图表的元素
    // 以下是一些常用的配置参数 都有写明详细的注释
    initChart() {
      let myEcharts = null;
      let ids = "charts" + String(this.index);
      myEcharts = this.$echarts.init(document.getElementById(ids));
      let option = {
        color: ["#FFBF02", "#FFE434"],
        radar: [
          {
            triggerEvent: true, //打开响应
            name: {
              textStyle: {
                padding: [-5, -6], // 控制文字padding
                color: "#333",
                fontSize: 14,
              },
            },
            indicator: this.indicator,
            center: ["50%", "50%"],
            radius: 55,
            startAngle: 90,
            splitNumber: 4,
            shape: "circle",

            splitArea: {
              areaStyle: {
                color: [
                  "transparent",
                  "transparent",
                  "transparent",
                  "transparent",
                ],
                shadowColor: "rgba(0, 0, 0, 0.2)",
                shadowBlur: 10,
              },
            },
            axisLine: {
              lineStyle: {
                color: "#ECF0F3",
              },
            },
            splitLine: {
              lineStyle: {
                color: "#ECF0F3",
              },
            },
            axisName: {
              color: "rgba(249, 193, 193, 1)",
              fontSize: 19,
            },
          },
        ],
        series: [
          {
            type: "radar",
            emphasis: {
              lineStyle: {
                width: 4,
              },
            },
            data: this.chartData,
          },
        ],
        silent: true,
      };
      if (myEcharts) {
        myEcharts.setOption(option);

        // myEcharts.on('click', function (params) {
        //   debugger
        //     var id = params.text;
        //     console.log("===option.radar.indicator",option.radar.indicator)
        //     for (let i = 0; i < option.radar.indicator.length; i++) {
        //         if (id == option.radar.indicator[i].text) {
        //             console.log('===option.radar.indicator[i].name',option.radar.indicator[i].text)
        //             option.radar.indicator[i].color = "#FFBF02";
        //         } else
        //             option.radar.indicator[i].color = "";
        //
        //     }
        //
        //     console.log(option.radar.indicator);//控制台观察
        //     myEcharts.setOption(option);
        //     //line_effect(parseInt(params.name));联合其他图表响应
        //
        // });
      }
      console.log(this.index);
      myEcharts.on("click", function (params) {
        console.log(params.name);
      });
      console.log("===echarts", myEcharts);
      window.addEventListener("resize", function () {
        myEcharts.resize();
      });
    },
  },

  // 然后在mounted里调用该方法就可以了
  mounted() {
    this.initChart();
  },
};
</script>
<style lang="scss" scoped>
.group-item {
  width: 100%;
  height: 327rpx;
  .group-item-chart {
    width: 100%;
    height: 327rpx;
  }
}
</style>
